<template>
  <!--  发货区域，支持选择快递-->
  <j-modal
    switchFullscreen
    width="70%"
    :title="title"
    :visible="visible"
    @cancel="handleCancel"
    :confirmLoading="confirmLoading"
  >
    <template slot="footer">
      <a-button @click="handleCancel">取消</a-button>
      <a-button v-if="!disableSubmit" :disabled="isDisable" type="primary" @click="handleOk">确认</a-button>
    </template>
    <a-form :form="form">
      <a-row :gutter="24">
        <!--        承运方式-->
        <!--        <a-col :md="8" :sm="24">-->
        <!--          <a-form-item-->
        <!--            :labelCol="labelCol"-->
        <!--            :wrapperCol="wrapperCol"-->
        <!--            label="合同编号"-->
        <!--          >-->
        <!--            <a-input-search placeholder="请选择合同" v-decorator="['contractCode',validatorRules.contractCode]"-->
        <!--                            readOnly :disabled="disableSubmits" enter-button @search="productSearch('contract')" />-->
        <!--          </a-form-item>-->
        <!--        </a-col>-->
        <a-col :md="8" :sm="24">
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="合同名称"
            hasFeedback
          >
            <a-input placeholder="请输入" v-decorator="['contractName',validatorRules.contractName]"></a-input>
          </a-form-item>
        </a-col>
        <a-col :md="8" :sm="24">
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="经销商名称"
          >
            <a-input-search v-decorator="['custName',validatorRules.custName]" placeholder="请选择经销商名称"
                            readOnly :disabled="disableSubmits" enter-button @search="custSearch('custname')" />
          </a-form-item>
        </a-col>
        <a-col :md="8" :sm="24">
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="经销商编号"
            hasFeedback
          >
            <a-input :disabled="true" placeholder="请选择经销商名称"
                     v-decorator="['custCode',validatorRules.custCode]"></a-input>
          </a-form-item>
        </a-col>
        <a-col :md="8" :sm="24">
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="年份"
            hasFeedback
          >
            <a-input placeholder="请输入年份"
                     v-decorator="['contractYear',validatorRules.contractYear]"></a-input>

          </a-form-item>
        </a-col>
        <a-col :md="8" :sm="24">
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="开始时间"
            hasFeedback
          >
            <!--            :disabled-date="disabledDate-->
            <a-date-picker style="width: 100%" format="YYYY-MM-DD" showTime valueFormat="YYYY-MM-DD"
                           :disabled="disableSubmit" v-decorator="['startDate', validatorRules.startDate]"
                           placeholder="点击选择开始时间" />
          </a-form-item>
        </a-col>
        <a-col :md="8" :sm="24">
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="{
        xs: { span: 24 },
        sm: { span: 18 }
      }"
            label="结束时间"
            hasFeedback
          >
            <a-date-picker style="width: 100%" format="YYYY-MM-DD" showTime valueFormat="YYYY-MM-DD"
                           :disabled="disableSubmit" v-decorator="[ 'endDate',validatorRules.endDate]"
                           placeholder="点击选择结束时间" />
          </a-form-item>
        </a-col>
        <a-col :md="24" :sm="24">
          <a-table  class='Table' :scroll="{x:'1500'}" size="middle" rowKey="contact" bordered :dataSource="mounthsData"
                   :columns="Columns">
            <template slot="quarterOne" slot-scope="text,record">
              <a-input type="number" :min="0" @change="e => quarterInput('quarterOne',text)" v-model="text"></a-input>
            </template>
            <template slot="quarterTwo" slot-scope="text,record">
              <a-input type="number" :min="0" @change="e => quarterInput('quarterTwo',text)" v-model="text"></a-input>
            </template>
            <template slot="quarterThree" slot-scope="text,record">
              <a-input type="number" :min="0" @change="e => quarterInput('quarterThree',text)" v-model="text"></a-input>
            </template>
            <template slot="quarterFour" slot-scope="text,record">
              <a-input type="number" :min="0" @change="e => quarterInput('quarterFour',text)" v-model="text"></a-input>
            </template>
            <template slot="quarterFive" slot-scope="text,record">
              <a-input type="number" :min="0" @change="e => quarterInput('quarterFive',text)" v-model="text"></a-input>
            </template>
            <template slot="quarterSix" slot-scope="text,record">
              <a-input type="number" :min="0" @change="e => quarterInput('quarterSix',text)" v-model="text"></a-input>
            </template>
            <template slot="quarterSeven" slot-scope="text,record">
              <a-input type="number" :min="0" @change="e => quarterInput('quarterSeven',text)" v-model="text"></a-input>
            </template>
            <template slot="quarterEight" slot-scope="text,record">
              <a-input type="number" :min="0" @change="e => quarterInput('quarterEight',text)" v-model="text"></a-input>
            </template>
            <template slot="quarterNine" slot-scope="text,record">
              <a-input type="number" :min="0" @change="e => quarterInput('quarterNine',text)" v-model="text"></a-input>
            </template>
            <template slot="quarterTen" slot-scope="text,record">
              <a-input type="number" :min="0" @change="e => quarterInput('quarterTen',text)" v-model="text"></a-input>
            </template>
            <template slot="quarterEleven" slot-scope="text,record">
              <a-input type="number" :min="0" @change="e => quarterInput('quarterEleven',text)"
                       v-model="text"></a-input>
            </template>
            <template slot="quarterTwelve" slot-scope="text,record">
              <a-input type="number" :min="0" @change="e => quarterInput('quarterTwelve',text)"
                       v-model="text"></a-input>
            </template>
            <template slot="yearTotal" slot-scope="text,record">
              <a-tag color="blue">{{ text }}</a-tag>
            </template>
          </a-table>
        </a-col>
        <a-col :md="24" :sm="24">
          <a-form-item
            :labelCol="{
                xs: { span: 24 },
        sm: { span: 2 },
              }"
            :wrapperCol="{
                xs: { span: 24 },
        sm: { span: 20 },
              }"
            label="证件附件"
          >
            <HUpload v-bind="loadDatas" ref="hupload" v-decorator="['url']" @loadOk="handleChange"></HUpload>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <proChose ref="prochoose" @okbro="okbropro"></proChose>
  </j-modal>
</template>

<script>
import { getAction, postAction } from '@/api/manage'
import HUpload from '@/components/cn-components/Hupload'
import proChose from '@comp/cn-components/ProChose'
import { pick } from 'lodash'

let ziduan = ['quarterOne', 'quarterTwo', 'quarterThree', 'quarterFour', 'quarterFive', 'quarterSix', 'quarterSeven', 'quarterEight', 'quarterNine', 'quarterTen', 'quarterEleven', 'quarterTwelve']

const factorys = function(arrays) {
  let mounths = arrays.map((item, index) => {
    return {
      title: index + 1,
      dataIndex: item,
      align: 'center',
      width: 100,
      scopedSlots: { customRender: item }
    }
  })
  return mounths
}

export default {
  name: 'contractAdd',
  components: {
    proChose,
    HUpload
  },
  computed: {
    loadDatas() {
      return {
        actionUrl: this.actionUrl,
        text: '上传附件'
      }
    }
  },
  data() {
    return {
      isDisable:false, //新增按钮状态
      actionUrl: window._CONFIG['domianUploadURL']+ '/cnUploadController/uploadOss',
      discription: '合同管理新增',
      disableSubmit: false,
      disableSubmits: false,
      title: '',
      confirmLoading: false,
      form: this.$form.createForm(this),
      model: {},
      visible: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 18 }
      },
      url: {
        // kuaidi: window._CONFIG['domianOrderURL'] + '/cnDictionaryTypeController/getDictionaryTypeList'
        sendOrder: window._CONFIG['domianDmsURL'] + '/dmsContractController/saveOrUpdateEntity'
      },
      validatorRules: {
        contractCode: {
          rules: [
            { required: true, message: '' }
          ]
        },
        contractName: {
          rules: [
            { required: true, message: '' }
          ]
        },
        custCode: {
          rules: [
            { required: true, message: '' }
          ]
        },
        custName: {
          rules: [
            { required: true, message: '' }
          ]
        },
        startDate: {
          rules: [
            { required: true, message: '' }
          ]
        },
        endDate: {
          rules: [
            { required: true, message: '' }
          ]
        },
        contractYear: {
          rules: [
            { required: true, message: '' }
          ]
        }
      },
      modal: undefined,
      ziduan,
      Columns: [
        {
          title: '月度',
          dataIndex: 'mounth',
          align: 'center',
          width: 130,
          customRender: (t, r, index) => {
            return '目标额（万元）'
          }
        },
        ...factorys(ziduan),
        {
          title: '合计（万元）',
          fixed: 'right',
          dataIndex: 'yearTotal',
          align: 'center',
          width: 110,
          scopedSlots: { customRender: 'yearTotal' }
        }
      ],
      mounthsDatas: [
        {
          contact: 'dsakdjsakl',
          quarterOne: 0,
          quarterTwo: 0,
          quarterThree: 0,
          quarterFour: 0,
          quarterFive: 0,
          quarterSix: 0,
          quarterSeven: 0,
          quarterEight: 0,
          quarterNine: 0,
          quarterTen: 0,
          quarterEleven: 0,
          quarterTwelve: 0,
          yearTotal: 0
        }
      ],
      mounthsData: []
    }
  },
  methods: {
    handleChange(info) {
      if (info == 0) {
        this.urls = []
      } else {
        this.urls = info
      }
    },
    quarterInput(key, e) {
      const dataSource = this.mounthsData[0]
      dataSource[key] = parseInt(e)
      dataSource.yearTotal = 0
      ziduan.forEach(item => {
        dataSource.yearTotal += dataSource[item]
      })
      this.$set(this.mounthsData, 0, dataSource)

    },
    priceCh(e) {
      console.log(e.target.value)
      let num = e.target.value
      if (num < 0) {
        this.$nextTick(() => {
          this.form.setFieldsValue({
            price: 0
          })
        })
      }
    },
    custSearch(status) {
      let formconfig = [
        {
          key: 'custCode',
          label: '经销商编号'
        },
        {
          key: 'custName',
          label: '经销商名称'
        }
      ]
      let tableconfig = {
        columns: [
          {
            title: '经销商编号',
            align: 'center',
            dataIndex: 'custCode',
            width: 120,
            ellipsis: true
          },
          {
            title: '经销商名称',
            align: 'center',
            dataIndex: 'custName',
            width: 120,
            ellipsis: true
          },
          {
            title: '合计',
            align: 'center',
            dataIndex: 'yearTotal',
            width: 100,
            ellipsis: true

          }
        ],
        list: window._CONFIG['domianURL'] + '/customerController/getPageList',
        multiple: false,
        columW: 10
      }
      this.name = '经销商'
      this.$refs.prochoose.edit(formconfig, tableconfig, status)
    },

    okbropro(record, status) {
      let res = record[0]
      if (status == 'contract') {
        this.form.setFieldsValue(pick(res, 'contractCode', 'contractName'))
      } else {
        this.form.setFieldsValue(pick(res, 'custCode', 'custName', 'channelCode', 'channelName'))
        console.log(this.form.getFieldValue('channelName'))
      }

    },
    add(record, status) {
      this.edit(record, status)
    },
    edit(iscord) {
      this.mounthsData = this.mounthsDatas
      this.disableSubmits = false
      this.form.resetFields()
      this.modal = undefined
      this.visible = true
      if (typeof iscord !== 'undefined') {
        this.disableSubmits = true
        this.modal = Object.assign({}, iscord)
        this.$nextTick(() => {
          this.form.setFieldsValue({ ...this.modal })
          if (!iscord.url) {
            this.$refs.hupload.fileList = []
          } else {
            this.$refs.hupload.fileList = iscord.url.map((item, index) => {
              return {
                uid: index,
                name: item.id,
                status: 'done',
                url: item.url
              }
            })
          }
        })
      }
    },
    handleOk() {
      this.isDisable = true
      let _vm = this
      this.form.validateFields((err, values) => {
        if (!err) {
          this.confirmLoading = true
          this.modal == undefined ? console.log('新增提交') : values.id = this.modal.id
          values.url = this.urls
          values.dmsContractTaskEntities = this.mounthsData
          postAction(this.url.sendOrder, values).then(res => {
            if (res.success) {
              _vm.$message.success(res.message)
              _vm.$emit('ok')
              _vm.close()
            } else {
              this.$message.error(res.message)
            }
          }).finally(() => {
            _vm.confirmLoading = false
            _vm.isDisable = false
          })
        }else{
          this.isDisable = false
        }
      })
    },
    handleCancel() {
      this.visible = false
      this.confirmLoading = false
    },
    close() {
      this.handleCancel()
    }
  }

}
</script>

<style scoped>

</style>